<template>
  <view class="main">
    <view class="top">
      <view class="line1">总收益</view>
      <view class="line2">322233</view>
      <view class="line3">
        <view>
          <view class="t">分红收益</view>
          <view class="b">￥724</view>
        </view>
        <view>
          <view class="t">推广收益</view>
          <view class="b">￥724</view>
        </view>
        <view>
          <view class="t">团队人数</view>
          <view class="b">724</view>
        </view>
      </view>
    </view>
    <view class="tit">邀请列表</view>
    <view class="list">
      <view class="item">
        <view class="he">
          <u-avatar src="" size="50"></u-avatar>
          <view class="r">
            <view class="n">人员昵称</view>
            <view class="sj">2024-09-09</view>
          </view>
        </view>
        <view class="line3">
          <view>
            <view class="t">个人消费</view>
            <view class="b">￥724</view>
          </view>
          <view>
            <view class="t">直推用户(人)</view>
            <view class="b">￥724</view>
          </view>
          <view>
            <view class="t">团队收益</view>
            <view class="b">724</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottomBox">
      <u-button text="立即邀请" shape="circle" @click="goPage('/pages/myPage/nowInvite/nowInvite')" color="#81d8d0"></u-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goPage } from "@/utils/commonFn";
</script>
<style lang="less" scoped>
.top {
  background: #81d8d0;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  padding: 32rpx 40rpx;
  color: #fff;
  .line1 {
    font-size: 28rpx;
    color: #ffffff;
  }
  .line2 {
    font-size: 64rpx;
    color: #ffffff;
  }
  .line3 {
    display: flex;
    justify-content: space-between;
    background: #9ae0d9;
    padding: 8rpx 50rpx;
    border-radius: 10rpx;
    .t {
      font-size: 24rpx;
      color: #ffffff;
    }
    .b {
      font-size: 28rpx;
      color: #ffffff;
      margin-top: 10rpx;
    }
  }
}
.tit {
  font-size: 36rpx;
  color: #333333;
  margin-top: 40rpx;
  margin-bottom: 32rpx;
  font-weight: bold;
}
.list {
  .item {
    background: #ffffff;
    border-radius: 16rpx;
    border-radius: 32rpx;
    padding: 32rpx;
    margin-bottom: 20rpx;
    .he {
      display: flex;
      align-items: center;
      .r {
        margin-left: 16rpx;
        .n {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
        .sj {
          font-size: 24rpx;
          color: #8a8a8d;
          margin-top: 12rpx;
        }
      }
    }
    .line3 {
      display: flex;
      justify-content: space-between;
      background: #f3f4f6;
      padding: 32rpx 60rpx;
      border-radius: 10rpx;
      margin-top: 20rpx;
      .t {
        font-size: 24rpx;
        color: #8a8a8d;
      }
      .b {
        font-size: 28rpx;
        color: #333333;
        margin-top: 10rpx;
        font-weight: bold;
      }
    }
  }
}
</style>
